//axios全局设置 请求拦截器
axios.interceptors.request.use( 
    (config)=>{  //这个回调函数 在每次发请求到服务器端之前 都会调用执行
        //设置请求头参数
        config.headers['Authorization'] = 'Bearer' + ' ' + localStorage.getItem('token');
        return config;
    },
    (error)=>{ 
        return Promise.reject(error)
    }
)
//axios全局设置 响应拦截器
axios.interceptors.response.use( 
    (res)=>{  //这个回调函数 在每次请求从服务器端返回到浏览器之前 都会调用执行
        return res;
    },
    (error)=>{ //每次请求发生错误, 都会调用执行
        if( error.response.status == 401 ){
            //alert('登陆过期!需要重新登录');
            localStorage.removeItem('token');
            location.href = './login.html';
        }else if( error.response.status == 404 ){
            alert('访问路径有误!');
        }else if( error.response.status == 500 ){
            alert('服务器内部错误!');
        }
        return Promise.reject(error)
    }
)
//获取搜索按钮
var searchBtn = document.querySelector('.searchbox .search');
//获取输入框
var inputEle = document.querySelector('.searchbox input');
//获取localStorage中存储的用户信息
var userinfo = JSON.parse( localStorage.getItem('userinfo') );
//渲染用户信息到首页
document.querySelector('.username').innerHTML = userinfo.name;
//点击搜索按钮, 发起ajax请求, 传参数给服务器端, 服务器端返回搜索的结果
searchBtn.onclick = ()=>{
    axios.get( '/user/search', { params:{ searchkey: inputEle.value  }  } ).then((res)=>{
        render( res.data.list )
        console.log(res.data);
    })
}
//给table-body绑定点击事件(事件委托)
var tablebody = document.querySelector('.table-body');
tablebody.onclick = (e)=>{
    //e.target.tagName == 'SPAN' 判断是不是 span 标签
    //e.target.classList.contains('icon-shanchu') 判断是不是 包含 icon-shanchu 这个类名
    if( e.target.tagName == 'SPAN' && e.target.classList.contains('icon-shanchu') ){
        //先获取这个删除按钮对应用户的手机号
        //console.log(e.target.dataset.phone);
        //发起 删除请求 , 删除服务器端的这个用户
        axios.post('/user/delete',{ phone: e.target.dataset.phone }).then((res)=>{
            console.log(res.data);
            //如果想要在发请求给服务器,删除成功之后, 同时让页面也看到删除后的效果,有两种方案
            //方案一: 本地删除这个dom节点
            //e.target.parentNode.parentNode.remove();
            //方案二: 让删除接口 返回删除后的新数据, 本地调用render方法重新渲染.
            render(res.data.list)
        })
    }
}
//渲染列表
function render(data){
    var str = ''
    str = data.map((item,index)=>{
        return `<ul class="row">
                    <li>${item.email}</li> 
                    <li>${item.name}</li>
                    <li>${item.phone}</li>
                    <li>${item.ingroup}</li>
                    <li>${item.isadmin?'是':'否'}</li>
                    <li class="${item.status?'':'error'}">${item.status?'正常':'异常'}</li>
                    <li>
                        <span class="iconfont icon-bianji editicon" id="101"></span>
                        <span class="iconfont icon-shanchu deleteicon" data-phone="${item.phone}"></span>
                    </li>
                </ul>`
    }).join('')
    if( str == '' ){
        str = '<ul style="text-align:center;color:red">未查询到数据!</ul>'
    }
    document.querySelector('.table .table-body').innerHTML 
    = str ;
}
//axios是从axios.min.js文件中暴露的 用来发送ajax请求的一个对象
axios.get('/user/list', { params: { page:1,count:2 } ,headers:{} } ).then((res)=>{
    //调用render方法, 传入后端返回的数据 渲染列表
    render( res.data.list );
    console.log(res.data);
})

